<template>
  <div>
    <ul class="poetryList">
      <li
        class="poetryList_li"
        v-for="ptl in $store.state.user.userCollectionList"
        :key="ptl.poetryTitle"
      >
        <h1 class="poetryTitle">{{ptl.poetryTitle}}</h1>
        <span class="poetryDynasty">{{ptl.poetryDynasty}}</span> ·
        <span class="poetryPote">{{ptl.poetryPote}}</span>
        <div v-for="(cnt,index) in ptl.poetryContnent" :key="index+'poetry'">
          <p class="poetryContnent">{{cnt}}</p>
        </div>
        <button class="collection_poetry" @click="deleteCollection(ptl._id)">取消收藏</button>
      </li>
    </ul>
    <div class="PageInfo_userPoetry">
      <PageInfo action-name="getCollection" :params="params"></PageInfo>
    </div>
  </div>
</template>

<script>
export default {
  name: "userCollection",
  data() {
    return {
      params: {
        searchName: this.$store.state.user.user_id
      }
    };
  },
  methods: {
    //取消收藏(删除收藏诗歌)
    deleteCollection(id) {
      this.$store.dispatch("deleteCollection", id).then(res => {
        if (res.ok === 1) {
          this.$message({
            message: res.msg,
            type: "success"
          });
          // setTimeout(function() {
          window.location.reload();
          // }, 300);
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.poetryList {
  clear: both;
  .poetryList_li {
    margin: 2rem 0 0 2rem;
    float: left;
    list-style: none;
    text-align: center;
    margin-bottom: 3rem;
    line-height: 1.5rem;
    // background: pink;
    min-height: 20rem;
    _height: 20px;
    .poetryTitle {
      font-style: normal;
    }
    .poetryDynasty {
      font-size: 0.7rem;
    }
    .poetryPote {
      font-size: 0.8rem;
    }
    .collection_poetry {
      display: inline-block;
      border: 2px solid rgb(247, 225, 33);
      font-size: 0.8rem;
      line-height: 1.5rem;
      padding: 0 0.5rem;
      color: rgb(218, 71, 71);
      background: white;
      border-radius: 5px;
    }
  }
}
.PageInfo_userPoetry {
  clear: both;
}
</style>